import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Picker, Swiper, SwiperItem } from '@tarojs/components'
import {AtList, AtListItem, AtInput, AtButton, AtTag, AtTextarea} from 'taro-ui'
import './editCaseInfo.scss'
import app from '../../../main.js'
import myJs from './editCaseInfoJs.js'
import reactMixin  from 'react-mixin'

export default class EditCaseInfo extends Component {
    constructor () { 
        super(...arguments); 
        this.state = this.getData();
    }
    config = {
        navigationBarTitleText: '修改基本病情'
    }

    init() {
        this.getBaseTemplate();
        this.getCaseTemplate('首诊');
        this.getCase_detail();
    }

    atTagClick(name, v) {
        var case_detail = this.state.case_detail;
        var value = case_detail[name];
        if(value != '' && value != null && value != 'null' && value != undefined) {
            value += ',';
        }
        value += v;
        case_detail[name] = value;
        this.setState({
            case_detail: case_detail
        });
    }

    submit() {
        this.redirectTo('../editCase/editCase');
    }

    render () {
        const { result, case_detail } = this.state;
        return (
            <View className='editCaseInfo'>
                {
                    result.items.map((item) => {
                        return item.label == '就诊日期' ? 
                        (
                            <View className="subject">
                                <View className="txt">
                                    <Text>就诊日期</Text>
                                </View>
                                <Picker mode='date' onChange={this.handleDetailChange.bind(this, 'case_detail.visit_at')}>
                                    <View className='picker'>
                                    {
                                        case_detail.visit_at ? 
                                        <Text>{case_detail.visit_at}</Text>: 
                                        <Text className="placeholderClass">请选择就诊日期</Text>
                                    }
                                    </View>
                                </Picker>
                            </View>
                        ) : 
                        (item.label == '主诉' ? 
                        (
                            <View className='subject'>
                                <View className="txt">
                                    <Text>主诉</Text>
                                </View>
                                <View>
                                    <AtTextarea count={false} maxLength={200} className="control" value={case_detail.main_suit} onChange={this.handleTextareaChange.bind(this, 'case_detail.main_suit')}/>
                                </View>
                            </View>
                        ) : 
                        (item.label != '就诊日期' && item.label != '主诉' && !app.isEmpty(item.options) ? 
                        (
                            <View className='subject'>
                                <View className="txt">
                                    <Text>{item.label}</Text>
                                </View>
                                <View>
                                    <AtTextarea count={false} maxLength={200} className="control" value={case_detail[item.name]} onChange={this.handleTextareaChange.bind(this, 'case_detail.'+item.name)}/>
                                </View>
                                <View className='at-row at-row--wrap panel'>
                                    {
                                        item.options.map((option) => {
                                            return <View className='at-col at-col-1 at-col--auto element'><AtTag onClick={this.atTagClick.bind(this, item.name, option)} type='primary' active={false}>{option}</AtTag></View>
                                        })
                                    }
                                </View>
                            </View>
                        ) : 
                        (null)));
                    })
                }

                <AtButton type='primary' size='normal' full={true} className="bottom" onClick={this.updateCase_detail.bind(this)}>保存</AtButton>
            </View> 
        );
    }
}

reactMixin.onClass(EditCaseInfo, myJs);
